<template>
  <a-spin :spinning="confirmLoading" class="tabkey-box">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="24">
            <div class="top-yb">
              <h3>基础信息</h3>
              <a-form-item label="医保目录搜索">
                <JSelectInput name="中药"  listUrl="wh/drugChinese/miQueryPage"  :disabled="yibaoswitch == 'N' || YXSdisableSubmit" :columns="gyscolumns" style="width:400px" placeholder="名称/助记号/编码、模糊匹配"  @change="JZSearch" :queryParamCode="['keyword','code','name','pinyinCode']" :queryParamText="['关键字','编码','名称','助记码']"></JSelectInput>
                <!-- <a-input-search style="width:400px" @search="JZSearch" v-model="keywords" placeholder="名称/助记号/编码、模糊匹配"></a-input-search> -->
              </a-form-item>
              <a-form-item label="医保对照">
                <JSwitch :disabled="YXSdisableSubmit" v-model="yibaoswitch" @change="ybdzChange"></JSwitch>
              </a-form-item>
              <dl class="xianjiainfo">
                <dd>
                  <em>限价:</em>
                  <span>{{model.lmtPrice || '--'}}</span>
                </dd>
                <dd>
                  <em>限制使用区划:</em>
                  <span v-if="model.lmtUsedAreas">{{model.lmtUsedAreas}}</span>
                  <span v-else>--</span>
                </dd>
              </dl>
              <!-- <p class="red">启用医保对照时，基础信息的批准文号为只读模式，关闭医保对照时，基础信息的批准文号关闭只读模式。</p> -->
            </div>
          </a-col>
          <a-col :span="8">
            <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input  v-decorator="['name',{rules:[ { required: true, message: '请输入!'}]}]" placeholder="请输入名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="助记码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['mnemonic',{}]"  placeholder="请输入助记码"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="getConfigStatus('generateDrugCode') || YXSdisableSubmit ?true:false" v-decorator="['code',{rules:[ { required: true, message: '请输入!'}]}]" placeholder="请输入编码"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="零售价格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number :disabled="YXSdisableSubmit" :precision="2" v-decorator="['retailPrice',{rules:[ { required: true, message: '请输入!'}]}]" placeholder="请输入零售价格" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="收费等级" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['miLevel',{}]" disabled placeholder="请输入收费等级"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="采购价格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number style="width: 100%;" :precision="4" v-decorator="['purchaseUnitPrice',{'initialValue':'0'}]" placeholder="请输入采购价格"></a-input-number>
            </a-form-item>
          </a-col>
          
          <a-col :span="8">
            <a-form-item label="开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择开始日期" @change="setTimeNext(beginSteps)" v-decorator="['startDate']" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择结束日期" @change="setTimeNext(beginSteps+1)" v-decorator="['endDate']" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="剂量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number  style="width: 100%;" v-decorator="['dose',{rules:[ { required: true, message: '请输入!'}]}]" placeholder="请输入剂量"></a-input-number>
              
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="剂量单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-search-select-tag :async="true" :triggerChange="true" placeholder="请选择"  v-decorator="['doseUnit',{rules:[ { required: true, message: '请选择!'}]}]" dict="drug_dose_unit">
              </j-search-select-tag>
              <!-- <j-dict-select-tag :triggerChange="true" v-decorator="['doseUnit',{rules:[ { required: true, message: '请选择!'}]}]" placeholder="请选择剂量单位" dictCode="drug_dose_unit" /> -->
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="总剂量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number style="width: 100%;" v-decorator="['specification',{rules:[ { required: true, message: '请输入!'}]}]" placeholder="请输入规格"></a-input-number>
              
            </a-form-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input style="width: 100%;" v-decorator="['specificationDescribe',{rules:[ { required: true, message: '请输入!'}]}]" placeholder="请输入规格"></a-input>
              
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="药用部分" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag :triggerChange="true" v-decorator="['medicinalPart',{rules:[ { required: true, message: '请选择!'}]}]" placeholder="请选择药用部分" dictCode="medicinal_part" />
            </a-form-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-item label="单品提成" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number :disabled="YXSdisableSubmit" style="width: 100%;" v-decorator="['singleCommission']" placeholder="请输入单品提成"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="产地" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['originPlace',{rules:[ { required: true, message: '请输入!'}]}]" placeholder="请输入产地"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="库存上限" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number style="width: 100%;" :min="0" v-decorator="['stockLimitUp',validatorRules.stockLimitUp]" placeholder="请输入库存上限"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="库存下限" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number style="width: 100%;" :min="0" v-decorator="['stockLimitDown',validatorRules.stockLimitDown]" placeholder="请输入库存下限"></a-input-number>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="剂型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag :triggerChange="true" v-decorator="['dosageForm']" placeholder="请选择剂型" dictCode="drug_dosform" />
            </a-form-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-item label="启用状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag :isHideOne="true" :triggerChange="true"  v-decorator="['enabledFlag',{'initialValue':'1'}]" dictCode="depart_status" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="">
              <div class="jcblbox">
                <label class="jcb-tt" for="">加成比例：</label>
                <j-dict-select-tag :isHideOne="true" :disabled="YXSdisableSubmit" v-model="model.markupRatioFlag" dictCode="RatioFlag_dict" placeholder="是否开启加成比例"/>
                <a-input-number ref="jcbl" :disabled="YXSdisableSubmit" v-if="model.markupRatioFlag+'' === '1'" style="width: 100%;" :min="1" v-decorator="['markupRatio',{rules:[ { required: true, message: '请输入加成比例!'}]}]" placeholder="请输入加成比例"></a-input-number>
              </div>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="">
              <div class="jcblbox">
                <a-checkbox v-model="model.markupRatioFlag" :disabled="YXSdisableSubmit" @change="RatioFlagChange">
                  加成比例：
                </a-checkbox>
                <a-input-number  ref="jcbl" v-if="model.markupRatioFlag" :disabled="YXSdisableSubmit" style="width: 100%;" :min="1" v-decorator="['markupRatio',{rules:[ { required: true, message: '请输入加成比例!'}]}]" placeholder="请输入加成比例"></a-input-number>

              </div>
              
            </a-form-item>
          </a-col> -->
        </a-row>
         
          <!-- <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col> -->
       
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>
  import { yaodianFormMinxin } from '@/mixins/yaodianFormMinxin'
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JSwitch from '@/components/jeecg/JSwitch'
  import JDate from '@/components/jeecg/JDate'  
  import JSelectInput from '@comp/jeecgbiz/JSelectInput'
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import { keyDownMinxin } from '@/mixins/keyDownMinxin' 
  export default {
    name: 'WhDrugWesternForm',
    mixins:[yaodianFormMinxin,keyDownMinxin],
    components: {
      JFormContainer,
      JDate,
      JSwitch,
      JSelectInput,
      JSearchSelectTag
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      //有销售禁用
      YXSdisableSubmit:{
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        yibaobotshow:false,
        keywords:'',
        yibaoswitch:'N',
        ybdz:false,
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          lg: { span: 8 },
          xxl: { span: 6 },
        },
        wrapperCol: {
          lg: { span: 16 },
          xxl: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          splitFlag: {
            rules: [
              { required: true, message: '请输入拆分标志 0:不可拆分 1:可以拆分!'},
            ]
          },
          prescriptionFlag: {
            rules: [
              { required: true, message: '请输入处方药标识 0:非处方 1:处方!'},
            ]
          },
          enabledFlag: {
            rules: [
              { required: true, message: '请输入启用标识 0:禁用 1:启用!'},
            ]
          },
          delFlag: {
            rules: [
              { required: true, message: '请输入删除标识 0:未删除 1:已删除!'},
            ]
          },
          stockLimitDown:{
            rules: [{validator: this.validateStockLimitDown}]
          },
          stockLimitUp:{
            rules: [{validator: this.compareStockLimitUp}]
          }
        },
        url: {
          add: "/wh/drugChinese/add",
          edit: "/wh/drugChinese/edit",
          saleEdit: "/wh/drugChinese/saleEdit",
          queryById: "/wh/drugChinese/detail",
          repeatCheck:'wh/drugChinese/repeatCheck'
        },
        repeatForm:{
          project:'2'
        },
        gyscolumns: [
          { title: '医保编码', dataIndex: 'medicalCatalogCode', align: 'center', width: '55%' },
          { title: '医保名称', dataIndex: 'medicalCatalogName', align: 'center', width: '45%' },
          { title: '名称', dataIndex: 'name', align: 'center', width: '45%' },
          // { title: '生产厂家', dataIndex: 'manufacturer', align: 'center', width: '45%' },
          { title: '剂量', dataIndex: 'dose', align: 'center', width: '45%' },
          { title: '药用部分', dataIndex: 'medicinalPart', align: 'center', width: '45%' },
          // { title: '单品提成', dataIndex: 'singleCommission', align: 'center', width: '45%' },
          { title: '零售价格', dataIndex: 'retailPrice', align: 'center', width: '45%' },
          { title: '规格(总量)', dataIndex: 'specification', align: 'center', width: '45%' },
          { title: '收费等级', dataIndex: 'miLevel', align: 'center', width: '45%' },
          { title: '限价', dataIndex: 'lmtPrice', align: 'center', width: '45%' },
          
          { title: '限制使用区划', dataIndex: 'lmtUsedAreas', align: 'center', width: '45%'},
        ],
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      },
      beginSteps(){
          var a = 3
          if(this.yibaoswitch == 'Y'){
            a = 4
          }
          return a
      }
    },
    mounted () {

      console.log('456');
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      validateStockLimitDown  (rule, value, callback) {
        const form = this.form;
        const stockLimitUp=form.getFieldValue('stockLimitUp');

        
        if (value) {
          if (value >= stockLimitUp) {
            callback('下限不能大于上限！');
          }
          form.validateFields(['stockLimitUp'], { force: true })
        }
        callback();
      },
      compareStockLimitUp  (rule, value, callback) {
        const form = this.form;
        if (value && value <= form.getFieldValue('stockLimitDown')) {
          // callback('上限不能小于下限！');
          callback('下限不能大于上限！');
        }else {
          callback()
        }
      },
      getCode(){
        if(this.getConfigStatus('generateDrugCode')){
          getAction('wh/drugChinese/getCode',{}).then((res)=>{
            if(res.success){
              this.form.setFieldsValue({'code':res.result.code})
            }
          });
        }
      },
      JZSearch(val){
        console.log(val,'JZSearch');
        this.model.lmtPrice = val[0].lmtPrice
        this.model.lmtUsedFlag = val[0].lmtUsedFlag
        this.model.lmtUsedAreas = val[0].lmtUsedAreas
        if(this.model.id){
          this.model.medicalCatalogCode = val[0].medicalCatalogCode
          this.model.medicalCatalogName = val[0].medicalCatalogName
          this.form.setFieldsValue(pick(val[0],'miLevel','mnemonic'))
        }else{
          this.model.medicalCatalogCode = val[0].medicalCatalogCode
          this.model.medicalCatalogName = val[0].medicalCatalogName
          this.model.code = val[0].medicalCatalogCode
          this.form.setFieldsValue(pick(val[0],'miLevel','name','lmtUsedAreas','mnemonic','retailPrice','approvalNumber','dose','doseUnit','startDate','endDate','manufacturer','unit','specification','dosageForm','usage','frequency','administration','splitFlag','specificationDescribe','prescriptionFlag','medicalCatalogCode','delFlag','createBy','createTime','updateBy','updateTime','tenantId'))

        }
        this.setTimeNext(0)
      },
     
      ybdzChange(val){
        console.log(val);
        if(val == 'Y'){
          this.ybdz = true;
          this.form.setFieldsValue({'approvalNumber':''})
        }else{
          this.ybdz = false;
        }
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'markupRatio','name','code','mnemonic','medicinalPart','retailPrice','approvalNumber','dose','doseUnit','startDate','endDate','manufacturer','unit','specification','dosageForm','usage','frequency','administration','splitFlag','prescriptionFlag','enabledFlag','medicalCatalogCode','delFlag','createBy','createTime','updateBy','updateTime','tenantId','originPlace','specificationDescribe','singleCommission','purchaseUnitPrice','miLevel','stockLimitDown','stockLimitUp'))
          if(!record.id){
            this.getCode()
            // 获取当前日期
            const today = new Date();
            // 增加年份，5为5年
            today.setFullYear(today.getFullYear() + 5);
            //默认 不开启限价
            this.$set(this.model,'markupRatioFlag','0')
            this.form.setFieldsValue({'endDate':today.toISOString().substring(0, 10)})
          }
        })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true && this.formData.dataId){
         
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
              this.resetKeydown()
            }
          });
        }else{
          this.resetKeydown()
        }
      },
     
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'miLevel','name','mnemonic','code','retailPrice','medicinalPart','approvalNumber','dose','doseUnit','startDate','endDate','manufacturer','unit','specification','dosageForm','usage','frequency','administration','splitFlag','prescriptionFlag','enabledFlag','medicalCatalogCode','delFlag','createBy','createTime','updateBy','updateTime','tenantId','lmtPrice'))
      },
    }
  }
</script>
<style lang="less" scoped>
.top-yb{
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  h3{
    margin-bottom: 0;
    margin-right: 32px;
  }
  /deep/ .ant-form-item{
    margin-bottom: 0;
    display: flex;
    margin-right: 18px;
  }
  border-bottom: 1px solid #D9D9D9;
  margin-bottom: 20px;
  &>p{
    flex:1;
    color: #FF0000;
  }
}
.yb-form{
  background: #F0F0F0;
  padding: 12px;
}
</style>